<template>
    <view>
		<!-- #ifdef APP-PLUS -->
		<!-- 右侧icon -->
		<view class="top-share-right-icon">
		    <uni-icons type="redo" size="20" color="#333" class="icon round cp" @tap="popup_share_event"></uni-icons>
		</view>
		<!-- #endif -->
		<view class="page-bottom-fixed">
			<view v-if="banner_list.length > 0" class="groupsbanner">
				<view class="bbooxx">
					<!-- 轮播图片 -->
					<swiper :indicator-dots="true" :autoplay="true" interval="5000" duration="1000" class="border-radius-main oh" >
						<block v-for="(item, index) in banner_list" :key="item.key">
							<swiper-item>
								<image :src="item.images_url" mode="widthFix" class="swiper-image" :data-value="item.event_value || item.url" :data-type="item.event_type == undefined ? 1 : item.event_type" @tap="banner_event" />
							</swiper-item>
						</block>
					</swiper>
				</view>
			</view>
			<view class="yx-page-box">
				<view class="yx-user-box border-radius-main oh">
					<image :src="avatar" mode="widthFix"></image>
					<view v-if="(user_now_info || null) != null" class="ppp">
						<view class="fl text-size-sm">{{nickname}}</view>
						<view class="fr text-size-sm"><text>{{user_now_info.integral}}</text>积分</view>
					</view>
					<view v-else class="ppp">
						<view class="fl text-size-sm">登录后可查看自己积分余额!</view>
						<view class="fr text-size-sm" data-value="/pages/login/login" @tap="url_event">去登录</view>
					</view>
					<view class="cl"></view>
				</view>
				
				<view class="oh bg-white yx-page-box2">
					<view class="mp-search-box">
						<view class="searchInput flex1">
							<component-search :diyTheme="diytheme" @onsearch="search_input_event" :propIsOnEvent="true" :propIsRequired="false" propIconColor="#9A9A9A" propPlaceholderClass="cr-grey" propTextColor="#666" propPlaceholder="输入商品名称搜索" propBgColor="#fff" propBrColor="rgb(205 205 205 / 60%)" :propDefaultValue="((keywords || null) != null) ? keywords : ''"></component-search>
						</view>
					</view>

					<!--分类导航-->
					<view v-if="category_list.length > 0" class="category_list">
						<scroll-view scroll-x>
							<view :class="'item'+((cat_style == 2) ? ' chunwenzi' : '')" v-for="(item, index) in category_list" :key="item.key">
								<view :data-value="item.id" @tap="category_event">
									<image :src="item.big_images" mode="aspectFit"></image>
									<view class="goods-base">
										<view v-if="item.id == category_id" class="goods-title single-text on">{{ item.name }}</view>
										<view v-else class="goods-title single-text">{{ item.name }}</view>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
					
					<view class="shaixuan_box">
						<view v-if="shaixuan_style == 1" class="item on" data-value="2" @tap="shaixuan_event">
							<text class="dis-inline-block">上新时间</text><uni-icons type="arrow-down" size="12" color="#f03b41"></uni-icons>
						</view>
						<view v-else-if="shaixuan_style == 2" class="item on" data-value="1" @tap="shaixuan_event">
							<text class="dis-inline-block">上新时间</text><uni-icons type="arrow-up" size="12" color="#f03b41"></uni-icons>
						</view>
						<view v-else class="item" data-value="1" @tap="shaixuan_event">
							上新时间
						</view>
						
						<view v-if="shaixuan_style == 3" class="item on" data-value="0" @tap="shaixuan_event">
							我能购买
						</view>
						<view v-else class="item" data-value="3" @tap="shaixuan_event">
							我能购买
						</view>
						
						<view v-if="shaixuan_style == 4" class="item item3 on" data-value="5" @tap="shaixuan_event">
							<text class="dis-inline-block">积分推荐</text><uni-icons type="arrow-down" size="12" color="#f03b41"></uni-icons>
						</view>
						<view v-else-if="shaixuan_style == 5" class="item item3 on" data-value="4" @tap="shaixuan_event">
							<text class="dis-inline-block">积分推荐</text><uni-icons type="arrow-up" size="12" color="#f03b41"></uni-icons>
						</view>
						<view v-else class="item item3" data-value="4" @tap="shaixuan_event">
							积分推荐
						</view>
						<view class="cl"></view>
					</view>
				</view>
			</view>
			<view class="yx-page-box-">
				<!-- 楼层数据 -->
				<block v-if="data_list.length > 0">
					<!--<view class="tit">
						<text v-if="(params.keywords || null) != null">搜索结果</text>
						<text v-else>热兑好礼</text>
					</view>-->
					<view class="data-list padding-horizontal-main padding-top-main oh">
						<view v-for="(item, index) in data_list" :key="index" class="item border-radius-main bg-white padding-bottom-sm margin-bottom-main oh pr">
							<!-- 商品主体内容 -->
							<navigator :url="'/pages/fcc/scorestore/detail/detail?goods_id=' + item.id" hover-class="none">
								<image class="goods-img dis-block" :src="item.home_recommended_images" mode="widthFix"></image>
								<view class="base padding-horizontal-main margin-top-sm">
									<view class="multi-text">{{item.title}}</view>
									<view class="fr margin-top">
										已兑<text>{{item.sales_count}}</text>
									</view>
									<view class="price margin-top">
										<text class="sales-price">{{item.price}}积分</text>
										<view v-if="(item.original_price || null) != null && item.original_price != ''" class="original-price single-text"><text>{{item.show_field_original_price_text}}</text>{{item.original_price}}积分</view>
									</view>
								</view>
							</navigator>
						</view>
					</view>
				</block>
				<view v-if="data_list.length == 0">
					<!-- 提示信息 -->
					<component-no-data :propStatus="data_list_loding_status" :propMsg="data_list_loding_msg"></component-no-data>
				</view>
			</view>
			
			<!-- 分享弹窗 -->
			<component-share-popup :diyTheme="diytheme" ref="share"></component-share-popup>
			<component-bottom-line :propStatus="data_bottom_line_status"></component-bottom-line>
		</view>

        <!-- 在线客服 -->
        <view v-if="common_app_is_online_service == 1">
            <!-- 在线客服 -->
            <component-online-service :propIsNav="true"></component-online-service>
        </view>

        <!-- 结尾 -->
        <component-footer :propStatus="1"></component-footer>
    </view>
</template>

<script>
import componentIconNav from '@/components/icon-nav/icon-nav';
import componentBanner from '@/components/slider/slider';
import componentFooter from "@/pages/fcc/scorestore/public/footer";
import componentNoData from "@/components/no-data/no-data";
import componentBottomLine from "@/components/bottom-line/bottom-line";
import componentOnlineService from "@/components/online-service/online-service";
import componentSharePopup from "@/components/share-popup/share-popup";
import componentSearch from "@/components/search/search";
const app = getApp();
export default {
    components: {
        componentIconNav,
        componentBanner,
		componentFooter,
		componentNoData,
		componentBottomLine,
		componentOnlineService,
		componentSearch,
		componentSharePopup
    },
    data() {
        return {
            currency_symbol: app.globalData.currency_symbol(),
            data_list_loding_status: 1,
            data_bottom_line_status: false,
            data_list: [],
            banner_list: [],
            category_list: [],
            data_page_total: 0,
            data_page: 1,
            params: null,
            post_data: {},
            load_status: 0,
            shopid: 0,
            bannerHeight: 300,//Math.ceil((314.96 / 640) * app.globalData.get_system_info('windowWidth')),
            common_app_is_online_service: 0,
            data_total: '',

            goods: {
                keys: '',
                id: '',
                home_recommended_images: '',
                title: '',
                price: '',
                images: ''
            },

            data_list_loding_msg: '',
			user_now_info:null,
			avatar: app.globalData.data.default_user_head_src,
			nickname: "用户名",
			cat_style:1,
			shaixuan_style:0,
			keywords:'',
			category_id:0,
			is_home_recommended:0,
			share_info:{
				title: '积分商城',
				path: '/pages/fcc/scorestore/index/index',
			},
			diytheme:{
				'main_color':'#fa5d14',
				'second_color':'#fac03d',
				'ligth_color_1':'#feeaeb',
				'ligth_color_2':'#feeaeb',
				'ligth_color_deg':0,
				'price_color':'#fa5d14',
			},
			lang_info:null,
        };
    },
    onLoad(params) {
        this.setData({
            params: params,
            post_data: params
        });
    },
    onShow() {
		app.globalData.page_event_onshow_handle();
		// 初始化配置
		this.init_config();
		
        this.init(); 
    },
    // 下拉刷新
    onPullDownRefresh() {
        this.setData({
            data_page: 1
        });
        this.get_data_list(1);
    },
    methods: {
		// 初始化配置
		init_config(status) {
		    if ((status || false) == true) {
		        this.setData({
		            currency_symbol: app.globalData.get_config('currency_symbol'),
		            common_app_is_online_service: app.globalData.get_config('config.common_app_is_online_service'),
		        });
		    } else {
		        app.globalData.is_config(this, 'init_config');
		    }
		},
		
        // 获取数据列表
        init() {
            var user = app.globalData.get_user_cache_info() || null;
            if (user != null) {
            	this.set_user_base(user);
            }
			this.get_first_data();
			this.get_data_list();
		},
		
		// 设置用户基础信息
		set_user_base(user) {
		    if((user.avatar || null) != null) {
		        this.setData({"avatar": user.avatar});
		    }
		    if((user.user_name_view || null) != null) {
		        this.setData({"nickname": user.user_name_view});
		    }
		},
		
		// 分享开启弹层
		popup_share_event(e) {
			if ((this.$refs.share || null) != null) {
				this.$refs.share.init({
					status: true,
					share_info: this.share_info
				});
			}
		},
		
		// 得到基础数据
		get_first_data(){
			var self = this;
			// 加载loding
            uni.request({
                url: app.globalData.get_request_url('index', 'index', 'scorestore'),
                method: 'POST',
                data: {},
                dataType: 'json',
                success: (res) => {
					uni.hideLoading();
                    uni.stopPullDownRefresh();

                    console.log(res.data);

                    if (res.data.code == 0) {
                        var data = res.data.data;
						var cat_style = 1;//默认带图片的样式
						if((data.category_list || null) != null && data.category_list.length > 0)
						{
							var flag = 0;
							for (var i in data.category_list) {
							    if(data.category_list[i].big_images == '')
								{
									flag++;//但凡有不上传分类图的，就采用第二种模式--纯文字模式
								}
							}
							if(flag > 0)
							{
								cat_style = 2;
							}
						}
                        self.setData({
                            banner_list: data.banner_list || [],
                            category_list: data.category_list,
							user_now_info:data.user_now_info || null,
							cat_style:cat_style
                        });
                    } else {
                        app.globalData.showToast(res.data.msg);
                    }
					
					// 分享菜单处理
					app.globalData.page_share_handle(this.share_info);
                },
                fail: () => {
					uni.hideLoading();
                    uni.stopPullDownRefresh();
                    app.globalData.showToast(this.$t('common.internet_error_tips'));
                }
            });
        },

        // 获取数据列表
        get_data_list(is_mandatory) {
            // 分页是否还有数据
            if ((is_mandatory || 0) == 0) {
                if (this.data_bottom_line_status == true) {
                    return false;
                }
            } 
			
			// 加载loding
            uni.showLoading({
                title: this.$t('common.loading_in_text'),
            });
            this.setData({
                data_list_loding_status: 1
            }); 
			
			// 参数
            var params = this.params;
            var post_data = this.post_data;
            post_data['page'] = this.data_page;
            post_data['category_id'] = this.category_id || 0; // 如果没有分类ID，则说明是首页，首页只展示推荐的
			post_data['keywords'] = this.keywords || '';
			post_data['is_home_recommended'] = this.is_home_recommended || 0;
			post_data['shaixuan_style'] = this.shaixuan_style || 0;
			post_data['n'] = 1000; //产品一页调用完，100条足以
			
			// 获取数据
            uni.request({
                url: app.globalData.get_request_url('search', 'index', 'scorestore'),
                method: 'POST',
                data: post_data,
                dataType: 'json',
                header: {
                    'content-type': 'application/x-www-form-urlencoded'
                },
                success: (res) => {
                    uni.hideLoading();
                    uni.stopPullDownRefresh(); console.log(res);

                    if (res.data.code == 0) {
                        if (res.data.data.data.length > 0) {
                            if (this.data_page <= 1) {
                                var temp_data_list = res.data.data.data;
                            } else {
                                var temp_data_list = this.data_list;
                                var temp_data = res.data.data.data;

                                for (var i in temp_data) {
                                    temp_data_list.push(temp_data[i]);
                                }
                            }

                            this.setData({
                                data_list: temp_data_list,
                                data_total: res.data.data.total,
                                data_page_total: res.data.data.page_total,
                                data_list_loding_status: 3,
                                data_page: this.data_page + 1
                            }); 
							
							// 是否还有数据
                            if (this.data_page > 1 && this.data_page > this.data_page_total) {
                                this.setData({
                                    data_bottom_line_status: true
                                });
                            } else {
                                this.setData({
                                    data_bottom_line_status: false
                                });
                            }
                        } else {
                            this.setData({
                                data_list_loding_status: 0
                            });

                            if (this.data_page <= 1) {
                                this.setData({
                                    data_list: [],
                                    data_bottom_line_status: false
                                });
                            }
                        }
                    } else {
                        this.setData({
                            data_list_loding_status: 0
                        });
                        app.globalData.showToast(res.data.msg);
                    }
                },
                fail: () => {
                    uni.hideLoading();
                    uni.stopPullDownRefresh();
                    this.setData({
                        data_list_loding_status: 2
                    });
                    app.globalData.showToast(this.$t('common.internet_error_tips'));
                }
            });
        },
		
		// 搜索事件
		search_input_event(e) {
		    var keywords = e || null;
		    
		    // 是否验证必须要传值
		    if (keywords == null) {
		        //app.globalData.showToast("请输入搜索关键字");
		        return false;
		    }
			this.setData({
			    keywords: keywords,
				data_page:1
			});
			this.get_data_list(1);
			// 进入搜索页面
			/*uni.navigateTo({
				url: '/pages/fcc/scorestore/index/index?keywords=' + keywords
			});*/
		},
		
		// 筛选事件
		shaixuan_event(e){
			var value = e.currentTarget.dataset.value;
			
			// 改变值，且调用搜索，改搜索方式，可以无限加载的模式，参考商品搜索页
			if(parseInt(value) == 3)
			{
				var self = this;
				// 提示登录
				var user = app.globalData.get_user_info(this, 'init');
				if (user != false) {
				    self.setData({
						shaixuan_style: value,
						data_page:1
					});
					self.get_data_list(1);
				}
			}else{
				this.setData({
				    shaixuan_style: value,
					data_page:1
				});
				this.get_data_list(1);
			}
		},
		
		// 分类点击事件
		category_event(e){
			var value = e.currentTarget.dataset.value;
			
			this.setData({
			    category_id: value,
				data_page:1,
			});
			this.get_data_list(1);
		},

        // 导航事件
        url_event(e) {
        	app.globalData.url_event(e);
        },
		
		banner_event(e) {
		    app.globalData.operation_event(e);
		}
    }
};
</script>
<style>
@import './index.css';
</style>
